<template>
<div class="form_wrap">
    <a-form
        layout="inline"
      >
        <a-form-item>
          <a-input placeholder="Username" v-model:value="seaText">
            <template #prefix><video-camera-outlined /> </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            html-type="submit"
            @click="toSearch()"
          >
            <UserOutlined />查询
          </a-button>
          <a-button type="info" @click="open()">添加</a-button>
        </a-form-item>
      </a-form>
      <div ref="Haha">哈哈哈哈哈哈</div>
    <a-modal v-model:visible="visible" title="添加管理员" @ok="handleOk">
        <a-form :model="formObj" ref="Myform" >
          <a-form-item label="用户名">
            <a-input v-model:value="formObj.userName"></a-input>
          </a-form-item>
           <a-form-item label="真实姓名：">
            <a-input v-model:value="formObj.turename"></a-input>
          </a-form-item>
             <a-form-item label="手机号：">
            <a-input v-model:value="formObj.phone"></a-input>
          </a-form-item>
              <a-form-item label="权限：">
                <a-select v-model:value="formObj.power">
                   <a-select-option    value="1">系统管理员</a-select-option>
                    <a-select-option value="2">课程管理员</a-select-option>
                </a-select>
          </a-form-item>
        </a-form>

       <template #footer>
        <a-button key="back" @click="handleCancel">Return</a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">确定</a-button>
      </template>
    </a-modal>

</div>
</template>

<script>
// 从图标库中导出图标
import { ref, reactive, onMounted } from 'vue'
import { addAdmin, editAdmin } from '../../api/admin'
import $bus from '../../utils/mitt'
import { UserOutlined, VideoCameraOutlined } from '@ant-design/icons-vue'
export default {
  name: 'adminForm',
  emits: {
    sendlist: null
  },
  components: { UserOutlined, VideoCameraOutlined },
  setup (props, context) {
    const visible = ref(false)
    var formObj = reactive({
      userName: '',
      tokenId: '',
      turename: '',
      phone: '',
      password: '123456',
      power: ''
    })

    const handleOk = async () => { // 发送请求
      // 判断是添加还是修改
      if (formObj.tokenId) {
        var editRes = await editAdmin(formObj)
        console.log(editRes)
      } else {
        var res = await addAdmin(formObj) // 添加管理员
        console.log(res)
      }
      // 清空输入框 ？
      formObj.userName = ''
      formObj.phone = ''
      formObj.turename = ''
      formObj.power = ''
      // 子传父  重新获取列表
      context.emit('sendlist')
      visible.value = false// 关闭弹出层
    }
    const open = () => {
      visible.value = true
    }
    // 给dom元素 绑定ref
    // 创建与dom元素相同的ref
    const Haha = ref(null)
    //
    onMounted(() => {
      console.log(Haha)
    })
    $bus.on('sendrow', (row) => {
      // row--当前编辑行数据
      console.log(row)
      visible.value = true
      // 编辑的数据赋值
      formObj.userName = row.userName
      formObj.phone = row.phone
      formObj.turename = row.turename
      formObj.power = row.power
      formObj.tokenId = row.tokenId
    })
    // 搜索方法
    const seaText = ref('')
    const toSearch = () => {
      // 子传父 传送 搜索字段给父组件
      context.emit('sendsea', seaText.value)
    }
    return {
      toSearch,
      seaText,
      Haha,
      formObj,
      open,
      handleOk,
      visible
    }
  }
}
</script>

<style lang="less">
  .form_wrap{
    width: 80%;
    margin: 20px auto;
  }
</style>
